import { useTranslation } from "react-i18next";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Key } from "lucide-react";

interface PasswordPromptDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSetPassword: () => void;
}

export function PasswordPromptDialog({
  open,
  onOpenChange,
  onSetPassword,
}: PasswordPromptDialogProps) {
  const { t } = useTranslation();

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-md">
        <AlertDialogHeader>
          <div className="flex items-center gap-2">
            <Key className="w-5 h-5 text-yellow-600" />
            <AlertDialogTitle className="text-lg">
              {t("Password Not Set", { defaultValue: "Password Not Set" })}
            </AlertDialogTitle>
          </div>
          <AlertDialogDescription className="text-sm text-muted-foreground">
            {t("Your account does not have a password set. For security reasons, we recommend setting a password to protect your account.", {
              defaultValue: "Your account does not have a password set. For security reasons, we recommend setting a password to protect your account."
            })}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="flex gap-2">
          <AlertDialogAction
            onClick={onSetPassword}
            className="bg-primary hover:bg-primary/90 cursor-pointer"
          >
            {t("Set Password Now", { defaultValue: "Set Password Now" })}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
